<template>
  <div>
    <el-dialog
      :title="$t('选择机柜')"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      width="1100px"
    >
      <div class="head_search u-f u-f-ac u-fw border_bottom">
        <div class="ipt_box u-f u-f-ac u-f-jsb">
          <p class="label font14 text_black">{{ $t("机柜号") }}：</p>
          <el-input
            v-model="device_id"
            :placeholder="$t('请输入机柜号')"
          ></el-input>
        </div>
        <div class="div_box u-f u-f-ac">
          <p class="label font14 text_black">{{ $t("所属代理商") }}：</p>
          <div
            class="content font14 text_black u-f u-f-ac"
            @click="openAgentList"
          >
            <p class="text-ellipsis">{{ agent ? agent : $t("选择代理商") }}</p>
          </div>
          <button class="btn font14 text_white bg_danger" @click="clearAgent">
            {{ $t("清除") }}
          </button>
        </div>
        <div class="div_box u-f u-f-ac">
          <p class="label font14 text_black">{{ $t("所属商户") }}：</p>
          <div
            class="content font14 text_black u-f u-f-ac"
            @click="openMerchantList"
          >
            <p class="text-ellipsis">
              {{ merchant ? merchant : $t("选择商户") }}
            </p>
          </div>
          <button
            class="btn font14 text_white bg_danger"
            @click="clearMerchant"
          >
            {{ $t("清除") }}
          </button>
        </div>
        <button class="sub_btn font14 text_white bg_blue" @click="getData">
          {{ $t("提交") }}
        </button>
      </div>
      
      <div class="table_box">
        <el-table :data="tableData" @selection-change="handleJurisSelection">
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="cabinet_id" :label="$t('设备号')"></el-table-column>
          <el-table-column prop="device_num" :label="$t('机柜口数')"></el-table-column>
          <el-table-column prop="name" :label="$t('商户名称')">
            <template slot-scope="{ row }">
              <span>{{row.name ? row.name : ''}}</span>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination_box ">
          <el-pagination
            background
            
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="page_size"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>

      </div>
      

      <div class="btn_box u-f u-f-ac u-f-je">
        <el-button type="primary" @click="jurisSubmit">{{
          $t("提交")
        }}</el-button>
      </div>
    </el-dialog>

    <agent-list ref="agentList" @hide="closeAgentList"></agent-list>
    <merchant-list
      ref="merchantList"
      :agency_id="agent_id"
      @hide="closeMerchantList"
    ></merchant-list>
  </div>
</template>

<script>
import agentList from "components/agent-list/agent-list.vue";
import merchantList from "components/merchant-list/merchant-list.vue";
import util from "@/assets/js/util.js";
export default {
  name: "changeDevice",
  data() {
    return {
      page: 1,
      page_size: 20,
      total: 0,
      isShow: false,
      device_id: "",
      agent: "",
      agent_id: "",
      merchant: "",
      merchant_id: "",
      tableData: [],
      jurisSelection: [],
    };
  },
  props: {
    defaultArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
    model: {
      type: String,
      default: "vertical",
    },
  },
  components: {
    agentList,
    merchantList,
  },
  methods: {
    show() {
      this.device_id = "";
      this.agent = "";
      this.agent_id = "";
      this.merchant = "";
      this.merchant_id = "";
      this.page = 1
      this.page_size = 20
      this.isShow = true;
      this.getData();
    },
    getData() {
      util
        .$http("/screenAdv/deviceDialog?page=" + this.page, {
          page_size: this.page_size,
          type: "device",
          model: this.model,
          cabinet_id: this.device_id,
          agency_id: this.agent_id,
          agency_name: this.agent,
          sid: this.merchant_id,
          seller_name: this.merchant,
        })
        .then((res) => {
          if (res.code == 1) {
            this.tableData = res.data.list;
            this.total = res.data.total;
          }
        });
    },
    openAgentList() {
      this.$refs.agentList.show();
    },
    closeAgentList(data) {
      this.agent = data.name;
      this.agent_id = data.id;
      this.merchant = "";
      this.merchant_id = "";
    },
    clearAgent() {
      this.agent = "";
      this.agent_id = "";
      this.merchant = "";
      this.merchant_id = "";
    },
    openMerchantList() {
      this.$refs.merchantList.show();
    },
    closeMerchantList(data) {
      this.merchant = data.name;
      this.merchant_id = data.id;
    },
    clearMerchant() {
      this.merchant = "";
      this.merchant_id = "";
    },
    handleJurisSelection(val) {
      this.jurisSelection = val;
    },
    jurisSubmit() {
      this.isShow = false;
      this.$emit('hide', this.jurisSelection)
    },
    handleCurrentChange(val) {
      this.page = Number(val)
      this.getData()
    },
  },
};
</script>

<style scoped>
.head_search {
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 280px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .div_box {
  width: 320px;
  margin-right: 20px;
}
.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.head_search .div_box .content:active {
  border-color: #409eff;
}
.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .sub_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 21px;
  cursor: pointer;
  border-radius: 4px;
}
.head_box {
  margin-bottom: 20px;
}
.li {
  width: 22%;
  list-style: none;
  margin-bottom: 15px;
  margin-right: 4%;
}
.li:nth-of-type(4n) {
  margin-right: 0;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.btn_box {
  margin-top: 40px;
}
</style>
